<template>
  <div class="login">
    <!-- 点 -->
    <div @contextmenu.stop="" id="bubble" class="bubble">
			<canvas id="bubble-canvas" class="bubble-canvas"></canvas>
		</div>
    <div class="system_name">智慧农业全生命周期监测云平台</div>
    <div class="login_content">
      <div class="login_title">智慧农业-全生命周期监测云平台</div>
      <div class="welcome">Welcome欢迎登录</div>
      <div class="login_info">
        <el-input v-model="state.form.name" size="large" placeholder="请输入用户名" :prefix-icon="Avatar" clearable>
        </el-input>
        <el-input v-model="state.form.password" size="large" type="password" placeholder="请输入密码" :prefix-icon="Lock"
          show-password clearable>
        </el-input>
      </div>
      <div class="account">
        <span>忘记密码</span>
        <span>注册账号</span>
      </div>
      <div class="login_btn">
        <el-button type="primary" @click="toHome">登录</el-button>
      </div>
    </div>
    <div class="copyright">
      dataserver@cma.gov.cn (86) 10-6840 8737 Copyright © NSMC. All Rights
      Reserved.京公网安备110108002134号 | 京ICP 备 09070587 号
    </div>
  </div>
</template>

<script setup>
import { Lock, Avatar } from '@element-plus/icons-vue'
import { ElNotification } from 'element-plus'
import { onMounted, reactive } from 'vue-demi'
import { useRouter } from 'vue-router'
import * as pageBubble from './page.ts'

const state = reactive({
  form: {
    name: '',
    password: ''
  },
})
const router = useRouter()
const toHome = () => {
  if(!state.form.name) {
    ElNotification({
      type:'error',
      title:'登录',
      message:'请登录！'
    })
    return
  }
  if(!state.form.password){
    ElNotification({
      type:'error',
      title:'登录',
      message:'请输入密码！'
    })
    return
  }
  if(state.form.name != 'admin' && state.form.password != '123456'){
    ElNotification({
      type:'error',
      title:'登录',
      message:'账号密码错误!'
    })
    return
  }
  router.replace('/home')
}
onMounted(()=>{
  pageBubble.init()
})
</script>
<style lang="scss" scoped>
.bubble {
	overflow: hidden;
	position: absolute;
}
.login {
  width: 100%;
  height: 100vh;
  background: url("@/images/home/loginBg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .system_name {
    position: absolute;
    font-size: 32px;
    top: 4.8%;
    width: 100%;
    text-align: center;
    color: #c8dcfc;
  }

  .login_title,
  .welcome {
    font-size: 26px;
    color: #999;
  }

  .welcome {
    font-size: 14px;
    margin: 26px 0 20px 0;
  }

  .login_content {
    width: 600px;
    height: 400px;
    padding: 60px 30px 40px;
    border-radius: 8px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    // background: url("@/assets/img/dialogBg.png") no-repeat;
    -moz-background-size: 100% 100%;
    background-size: 100% 100%;

    .login_info {
      ::v-deep .el-input__wrapper {
        font-size: 1rem !important;
        background-color: transparent;
        margin-bottom: 15px;
      }
    }

    .account {
      font-size: 12px;
      color: #0065ff;
      display: flex;
      flex-direction: row-reverse;

      span {
        margin-left: 30px;
        cursor: pointer;
      }
    }

    .login_btn {
      >.el-button--primary {
        width: 100%;
        height: 48px;
        font-size: 1.25rem;
        margin-top: 1.25rem;
      }
    }
  }

  .copyright {
    position: absolute;
    width: 100%;
    color: #fff;
    font-size: 12px;
    line-height: 40px;
    bottom: 0;
    text-align: center;
  }
}
</style>
